<div class="login-screen">
  <div class="login-form-container">
    <h3 class="login-title">WMS</h3>
    <form nz-form [formGroup]="validateForm" class="login-form">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-user">
            <input type="text" nz-input formControlName="username" placeholder="Username">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">Please input your username!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-lock">
            <input type="text" nz-input formControlName="password" placeholder="Password">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please input your Password!</nz-form-explain>
          <!--<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').hasError('minLength')">minLength!</nz-form-explain>-->
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button class="login-form-button" [nzType]="'primary'" [disabled]="validateForm.invalid" (click)="submitForm()">Log in</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
